<template>
	<view class="login-change-page">
		<!--<z-nav-bar backState="1000"></z-nav-bar>-->
		<!-- 公共组件-每个页面必须引入 -->
		<!--<public-module></public-module>-->
		<view class="bd">
			<image class="brand" :src="brand" mode="widthFix"></image>
			<button class="student active" type="default" @click="handleStudentLogin">学生登录</button>
			<button class="teacher" type="default" @click="handleTeacherLogin">教师登录</button>
		</view>
		<view class="ft">
			<image :src="illustration" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		onLogin
	} from '../../config/login.js'
	export default {
		data() {
			return {
				brand: require('@/static/logo.png'),
				illustration: require('@/static/illustration/change.png'),
			};
		},
		//第一次加载
		onLoad(e) {},
		//页面显示
		onShow() {},
		//方法
		methods: {
			...mapMutations(['setUserInfo']),
			handleStudentLogin() {
				onLogin('judge', () => {
					uni.showToast({
						icon: 'success',
						title: '登陆成功'
					})
					uni.switchTab({
						url: '/pages/my/my'
					});
				});
				// 模拟登录成功
				// setTimeout(()=>{
				// 	uni.navigateBack({
				// 		delta: 1
				// 	})
				// 	// 方法一
				// 	this.setUserInfo({  
				// 	    avatarUrl: require('@/static/user-img.png'),  
				// 	    token: 'user123456',  
				// 	    userName: '许未来',  
				// 	    isLogin: true  
				// 	})
				// 	// 方法二
				// 	// uni.$emit('login', {  
				// 	//     avatarUrl: require('@/static/user-img.png'),  
				// 	//     token: 'user123456',  
				// 	//     userName: '许未来',  
				// 	//     isLogin: true  
				// 	// });
				// },1500)
			},
			handleTeacherLogin() {
				this.onPageJump("/subpages/user/login")
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.login-change-page {
		padding: calc(var(--status-bar-height) + 70upx) 50upx 50upx 50upx;

		.brand {
			width: 484rpx;
			height: auto;
			display: block;
			margin: 0 auto 128rpx auto;
		}

		.bd {
			width: 654rpx;
			margin: 0 auto;

			button {
				margin-top: 48rpx;
				height: 49px;
				line-height: 49px;
				border-radius: 30px;
			}

			button.student {
				color: white;
				background-color: $uni-theme-color;
			}

			button.teacher {
				color: $uni-text-color;
				background-color: white;
			}

			button.active {
				filter: drop-shadow(0px 2px 16px rgba(129, 180, 53, 0.24));
			}
		}

		.ft {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: auto;

			image {
				width: 100%;
			}
		}
	}
</style>
